<template>
  <div id="Custom">
    <div class="box">
      <div class="top">
        <div class="one">
          <div class="iconfont icon-fanhui a" @click="$router.push('/createOrder')"></div>
        </div>

        <div class="two">选择客户</div>

        <div class="three">
          <span>+</span>
          <span style="margin-left: 10%;" @click="comfirm()">确认</span>
        </div>

        <div class="four">
          <span>+</span>
          <span style="margin-left: 10%;" @click="showModal = true">添加</span>
        </div>
      </div>

      <div class="main">
        <div class="ss">
          <div class="left">
            <img src="./img/1.png" alt style="width: 100%;height: 100%;" />
          </div>
          <div class="right">
            <input
              type="text"
              placeholder="请输入搜索"
              style="width: 100%;height: 100%;background: #f5f5f5;border: 0;outline: none;"
              v-model="username"
            />
          </div>
        </div>

        <!-- 表格 -->
        <div class="tablebox">
          <!-- 表格 -->
          <table>
            <tr>
              <th>客户姓名</th>
              <th>会员信息</th>
              <th>联系方式</th>
              <th>注册时间</th>
            </tr>

            <tr v-for="(item) in compudata" :key="item._id" @click="send(item)">
              <td>{{item.username}}</td>
              <td>{{item.vip}}</td>
              <td>{{item.phone}}</td>
              <td>
                {{
                new Date(item.time).toLocaleString().substr(0,10).split('/')[0]+'年'
                }}
                {{
                new Date(item.time).toLocaleString().substr(0,10).split('/')[1] < 10?
                '0'+new Date(item.time).toLocaleString().substr(0,10).split('/')[1]+'月':
                new Date(item.time).toLocaleString().substr(0,10).split('/')[1]+'月'
                }}
                {{
                new Date(item.time).toLocaleString().substr(0,10).split('/')[2] < 10?
                '0'+new Date(item.time).toLocaleString().substr(0,10).split('/')[2]+'日':
                new Date(item.time).toLocaleString().substr(0,10).split('/')[2]+'日'
                }}
              </td>
            </tr>
          </table>
        </div>
      </div>

      <Transition name="modal">
        <div v-if="showModal" class="modal">
          <div class="modal-content">
            <div class="title">
              <span style="width:40%;height:100%;font-size:33px;margin-left:31%;">添加客户</span>
              <span
                style="width:10%;height:100%;font-size:24px;margin-left:24%;"
                @click="showModal = false"
              >X</span>
            </div>

            <div class="input1">
              <label for="name" style="font-size: 21px;color: #666;">客户姓名:</label>
              <input
                style="width: 68%;height: 40px;border: 1px solid #ccc;border-radius: 5px;padding-left: 1px;font-size: 16px;color: #666;margin-left:5%"
                type="text"
                v-model="addname"
              />
            </div>

            <div class="input2">
              <label for="name" style="font-size: 21px;color: #666;">会员信息:</label>
              <div v-for="option in options" :key="option.value" style="margin-left:4%;">
                <input
                  type="radio"
                  :id="option.value"
                  :value="option.value"
                  v-model="selectedOption"
                  @click="console.log(selectedOption)"
                />
                <label :for="option.value">{{ option.text }}</label>
              </div>
            </div>

            <div class="input3">
              <label for="name" style="font-size: 21px;color: #666;">注册时间:</label>
              <el-date-picker
                v-model="value1"
                placeholder="选择日期"
                style="margin-left:5%;width:68%;height:57%"
              />
            </div>

            <div class="input">
              <label for="name" style="font-size: 21px;color: #666;">手机号码:</label>
              <input
                style="width: 68%;height: 40px;border: 1px solid #ccc;border-radius: 5px;padding-left: 1px;font-size: 16px;color: #666;margin-left:5%"
                type="text"
                v-model="addtel"
              />
            </div>

            <div style="margin-top:13%;">
              <el-button
                style="width:30%;height:50px;margin-left:14%;font-size: 21px;color: #666;"
                @click="showModal=false"
              >取消</el-button>
              <el-button
                style="width:30%;height:50px;margin-left:16%;font-size: 21px;"
                type="primary"
                @click="comfirmadd()"
              >确认</el-button>
            </div>
          </div>
        </div>
      </Transition>

      <!-- 分页 -->
      <div class="fen">
        <el-pagination
          :current-page="num"
          :page-size="size"
          :page-sizes="[1,2,3,4]"
          
          
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="zong"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      
    </div>

    <!-- 弹出框 -->

    <!-- 右边弹出 -->
  </div>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { ref, reactive, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";

// 分页
const num = ref(1);
const size = ref(2);
const zong = ref(0);
const handleSizeChange = val => {
  size.value = val;
  getdata();
};
const handleCurrentChange = val => {
  num.value = val;
  getdata()
};

const input2 = ref("");
const tabledata = reactive([]);
// 获取数据
const getdata = () => {
  axios
    .get(`http://127.0.0.1:3000/showuser`, {
      params: { page: num.value, pagesize: size.value }
    })
    .then(res => {
      console.log(res.data.data);
      zong.value = res.data.total;
      // tabledata.value=res.data.data
      Object.assign(tabledata, res.data.data);
    });
};
// 搜索姓名
const username = ref("");
// 计算数据
const compudata = computed(() => {
  return tabledata.filter(item => {
    return item.username.includes(username.value);
  });
});

// 获取用户数据
onMounted(() => {
  getdata();
});

// 要传送的名字及用户ID
const name = ref("");

const send = val => {
  name.value = val.username;
  localStorage.setItem('uid',JSON.stringify(val._id))
 

};
// 确认跳转
const router = useRouter();
const comfirm = () => {

  router.push({
    path: "/createOrder",
    
  });
  localStorage.setItem('name',JSON.stringify(name.value))
};

// 添加用户
const adduser = () => {
  showModal.value = true;
};

// 添加用户
const adduser1 = () => {
  showModal.value = true;
};

// 添加用户
const adduser2 = () => {
  showModal.value = true;
};

// 添加用户
const adduser3 = () => {
};

// 弹出层
const showModal = ref(false);

// 添加姓名
const addname = ref("");
// 单选按钮
const selectedOption = ref("白金会员");
const options = reactive([
  { text: "白金会员", value: "白金会员" },
  { text: "黄金会员", value: "黄金会员" },
  { text: "普通会员", value: "普通会员" }
]);
// 添加时间
const value1 = ref("");
console.log(value1.value);

// 添加电话号码并作号码校验
const addtel = ref("");

// 确认添加
const comfirmadd = () => {
  // let obj = {
  //   username: addname.value,
  //   vip: selectedOption.value,
  //   phone: addtel.value,
  //   time: value1.value
  //   // 添加时间
  // };
  // axios.post(`http://127.0.0.1:3000/adduser`, obj).then(res => {
  //   console.log(res.data.code);
  //   getdata();
  // });

  showModal.value = false;

  addname.value = "";
  selectedOption.value = "";
  addtel.value = "";
  value1.value = "";
};
</script>





<style lang="less" scoped>
#Custom {
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    width: 98%;
    height: 96%;
    .fen {
      width: 38%;
      height: 6%;

      position: absolute;
      bottom: 13%;
      left: 30%;
    }

    .top {
      width: 100%;
      height: 12%;

      display: flex;
      justify-content: flex-start;
      align-items: center;
      .one {
        width: 4%;
        height: 43%;

        border-radius: 50%;
        margin-left: 3%;
        display: flex;
        align-items: center;
        .a {
          color: black;
          margin-left: 26%;
          font-size: 35px;
          margin-top: -1vh;
        }
      }

      .two {
        width: 10%;
        height: 45%;

        margin-left: 1%;
        font-size: 29px;
        text-align: center;
        font-weight: 600;
      }

      .three {
        width: 13%;
        height: 45%;
        margin-left: 44%;

        text-align: center;
        font-size: 20px;
        line-height: 46px;
        background: #025cca;
        border-radius: 12px;
        color: white;
      }

      .four {
        width: 13%;
        height: 45%;
        margin-left: 6%;

        text-align: center;
        font-size: 20px;
        line-height: 46px;
        background: #025cca;
        border-radius: 12px;
        color: white;
      }
    }

    .main {
      width: 90%;
      height: 90%;
      margin-left: 4%;
      border-radius: 15px;
      background: white;
      padding-top: 27px;
      padding-left: 2%;
      .ss {
        width: 96%;
        height: 7%;
        background: #f5f5f5;
        border-radius: 12px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-left: 1%;
        .left {
          width: 3%;
          height: 63%;
          background: #f5f5f5;
          margin-left: 3%;
        }
        .right {
          width: 60%;
          height: 63%;
        }
      }

      .tablebox {
        width: 90%;
        height: 65%;
        margin-left: 4%;
        margin-top: 2%;
        table {
          width: 100%;
        }

        th {
          background: #f2f2f2;
          width: 25%;
          height: 5%;
          padding: 20px;
          font-size: 20px;
        }

        // 给th添加鼠标悬浮样式
        tr:hover {
          background: #ddebf5;
        }

        td {
          padding: 19px;
          text-align: center;
          border-bottom: 1px solid #ddd;
          font-size: 20px;
        }
      }
    }

    .modal {
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.4);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .modal-content {
      background-color: #fefefe;
      padding: 20px;
      border: 1px solid #888;
      width: 30%;
      height: 50%;

      .title {
        width: 100%;
        height: 10%;

        line-height: 37px;
      }

      .input1 {
        width: 100%;
        height: 16%;
        display: flex;
        justify-content: flex-start;
        margin-top: 13%;
      }

      .input2 {
        width: 100%;
        height: 16%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: -7%;
      }

      .input3 {
        width: 100%;
        height: 16%;
        display: flex;
        justify-content: flex-start;
        margin-top: 5%;
      }
    }

    .close-button {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close-button:hover,
    .close-button:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

    .modal-enter-active,
    .modal-leave-active {
      transition: opacity 0.3s, transform 0.3s;
    }

    .modal-enter-from,
    .modal-leave-to {
      opacity: 0;
      transform: scale(0.9);
    }
  }
}
</style>